<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      ul,li {
           margin: 0;
           padding: 0;
       }
       .list>li{
            float: left;
            list-style: none;
            margin-right: 30px;
            padding-bottom: 5px;
            font-weight: bolder;
        }
       .list>li:hover{
            color: orange;
            border-bottom: 3px solid orange;
            cursor: pointer;
        }
        /*
         当滑动的时候突然间多出来的5px的边框会影响到下面的盒子模型
         ie6的盒子模型：width+margin
        */
       .list{
           /*
             修改盒子的属性
           */
           box-sizing: border-box;
           overflow: hidden;
           height: 30px;
           width: 80%;
           margin: 10px auto;
       }
        .box{
            margin-top: 10px;
            clear: left;
            overflow: hidden;
            width: 80%;
            margin: 0 auto;
        }
        .box>li{
            list-style: none;
            float: left;
            width: 18%;
            margin-right: 5px;
            height: 300px;
        }
        .box>li>img{
            width: 100%;
            height: 70%;
        }
      a{
            display: block;
            font-size: 12px;
            margin-left: 5px;
        }
      /**
        nth-of-type:选中哪种元素类型的第几个
       */
        p{
            color: red;
            font-size: 18px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <!--
        js----面向对象
        封装----对象（只要找到这个对象，就可以调用这个方法）
       网络请求----XMLHTTPRequest
    -->
  <ul class="list">
      <li>男装</li>
      <li>女装</li>
      <li>箱包</li>
      <li>食品</li>
      <li>电器城</li>
      <li>美妆</li>
      <li>鞋品</li>
      <li>户外运动</li>
  </ul>
  <ul class="box">

  </ul>
<script type="text/javascript">
    //通过异步的网络请求，实现局部刷新的效果
    //是否需要跨域-------如果协议相同，域名相同，端口号相同的情况下可以使用
    //js中封装好的网络请求的对象进行与后台的交互XMLHTTPRequest

   //获取网络对象的实例-----因为js把网络请求的方法全部都封装到这个对象里面了
    var xhr=new XMLHttpRequest();

    //设定请求的地址
    /**
     * 获取了请求对象之后，发一个快递，发快递的时候选择中通圆通（方式），发给快递接件人的地址（url）
     *  (1)请求方式
     * （2）请求地址
     * （3）是否异步(异步)
     */
    xhr.open("GET","data/json1",true);

    //发送
    xhr.send();

    //检测发送快递的状态----检测发送的状态，一旦状态发生改变，那么我就可以采取某些方法了
    xhr.onreadystatechange=function () {
        //第一个前提：你发送的网络请求的消息对方已经接收到 0-4
        //第二个前提：对方答应你给你相应，也就是可以给你数据
        /**
         * readyState:请求码
         * status：状态码
         * responseText:相应文本
         */
        /**
         * 处理json数据的方式
         * （1）第一种把json字符串转成json对象
         *      JSON.parse()
         *
         * （2）第二种方法把json对象转成json字符串---用于给后台发送数据的时候
         *   JSON.stringify()
         *
         *
         */
        if(xhr.readyState===4 && xhr.status===200){
             console.log(xhr.responseText);
             //判断接收回来的数据，是字符串还是对象----判断数据类型的方法（typeof）
            console.log(typeof xhr.responseText);
            var objs=JSON.parse(xhr.responseText);
            //先创建li，创建多少个li？
            for (var  x in objs){
                //遍历数组，有多少个对象，创建多少个li
                var li=document.createElement("li");
                console.log(li);
                var image=document.createElement("img");
                //通过下标获取数组中的每一项
                console.log(objs[x]);
                image.src=objs[x].image;
                var a=document.createElement("a");
                a.innerHTML=objs[x].pro;
                var p=document.createElement("p");
                p.innerHTML=objs[x].price;
                //填充元素---父元素.appendChild(新创建的子元素)
                li.appendChild(image);
                li.appendChild(a);
                li.appendChild(p);

              document.getElementsByClassName("box")[0].appendChild(li);
            }

        }


    }











</script>


</body>
</html>